import { Component, OnInit, OnDestroy, ViewContainerRef, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { NzMessageService, NzModalService } from 'ng-zorro-antd';
import { BaseService, DataRegisterService } from 'src/app/services';
import { EventManagerService } from 'src/app/services/event-manager.service';
import { OrganizationService } from 'src/app/services/organization.service';
import { UploadService } from 'src/app/services/upload.service';
import { PermitConfig, PermitConfigId } from '../../../models';
import { EngineService } from '../../../services/engine.service';
import { BaseFieldComponent } from '../base-field/base-field.component';
import { ImgModalComponent } from './img-modal/img-modal.component';

@Component({
  selector: 'zepride-bid-opening',
  templateUrl: './bid-opening.component.html',
  styleUrls: ['./bid-opening.component.less', '../field.common.less']
})
export class BidOpeningComponent extends BaseFieldComponent implements OnInit, AfterViewInit, OnDestroy {

  dm: any = {};
  curBgImgUrl: string;
  isfullscreen = false;
  beijingTime = Date.now();
  timer;
  backgroundImage;
  editable = true;
  permitConfig: PermitConfig[] = [
    { mode: 'query', permitId: '查看', permitName: '', authObjectId: '' },
    { mode: 'edit', permitId: '编辑', permitName: '', authObjectId: '' }
  ];
  editModeStatus: any = {};
  isAuthorized = true;
  @ViewChild('bidOpeningRef') bidOpeningRef: ElementRef<HTMLDivElement>;

  constructor(
    protected engineService: EngineService,
    protected baseSvr: BaseService,
    protected eventSvr: EventManagerService,
    protected orgSvr: OrganizationService,
    public uploadService: UploadService,
    protected msg: NzMessageService,
    private modal: NzModalService,
    private viewContainerRef: ViewContainerRef,
    protected dataRegisterService: DataRegisterService
  ) {
    super(engineService, baseSvr, eventSvr, orgSvr, uploadService, msg, dataRegisterService);
  }

  ngOnInit(): void {
    this.dm = this.componentData.extends.dataModel;

    if (this.dm) {
      const bgImgItem = this.dm.backgroundImages.find(x => x.selected);
      if (bgImgItem) {
        this.curBgImgUrl = bgImgItem.url;
      }

      if (this.timer !== 'off') {
        const timer = setInterval(() => {
          this.beijingTime = Date.now();
        }, 1000);
      }
    } else {
      this.dm = {};
    }
  }

  ngAfterViewInit() {
    setTimeout(() => {
      const authData = this.setAuthorityData();
      this.zeprideAuthorityData = {
        ...authData,
        afterChecked: this.afterAuthChecked.bind(this)
      };
    }, 0);
  }

  ngOnDestroy(): void {
    clearInterval(this.timer);
  }

  toggleFullScreen() {
    const isFullscreen = document.fullscreenElement;
    const element = this.bidOpeningRef;
    if (element && element.nativeElement) {
      if (isFullscreen) {
        document.exitFullscreen();
      } else {
        element.nativeElement.requestFullscreen();
      }
    }
  }

  moreBackgroundImgs() {
    const modal = this.modal.create({
      nzTitle: null,
      nzContent: ImgModalComponent,
      nzViewContainerRef: this.viewContainerRef,
      nzWidth: 1008,
      nzClosable: false,
      nzComponentParams: {
        dm: this.dm,
        curImage: this.backgroundImage
      },
      nzFooter: null
    });

    modal.afterClose.subscribe((result) => {
      if (result) {
        this.curBgImgUrl = result.backgroundImage.url;
        this.backgroundImage = result.backgroundImage;
        this.backgroundImage.selected = true;
      }
    });
  }

  afterAuthChecked(params: {
    permitId: PermitConfigId;
    isAuthorized: boolean;
  }) {
    if (!params.isAuthorized && params.permitId === '编辑') {
      this.editable = false;
    }
  }

  editMode(key: string) {
    if (!this.isAuthorized) {
      return;
    }
    this.editModeStatus[key] = true;
  }

  cancelEdit(key: string) {
    this.editModeStatus[key] = false;
  }
}
